<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <div class="app">
    <div class="start_btns">
      <button class="Instruction_btn">Instruction</button>
      <button class="start_btn">Start</button>
      <button class="startRanking">Ranking</button>
    </div>
    <div class="Instruction_cont">
      <h2>这是一个迷宫游戏</h2>
      <button class="menu">menu</button>
    </div>
    <div class="difficulty_select">
      <button class="easy_btn">easy</button>
      <button class="normal_btn">normal</button>
      <button class="hard_btn">hard</button>
      <input type="file" class="file">
      <button class="import_btn">import</button>
      <button class="select_menu">menu</button>
    </div>
    <div class="map_select">
      <h2>easy</h2>
      <div class="map_box">
        <div class="map_items">
          <div class="map_item"></div>
        </div>
      </div>
      <div class="map_select_btn">
        <button class="menu">menu</button>
        <button class="export">export</button>
      </div>
    </div>
    <div class="game">
      <div class="game_btn">
        <h2 class="gameName">Nickname: 小明</h2>
        <button class="best_btn">the best</button>
        <h2 class="remaining">remaining steps: 100步</h2>
        <button class="pause_btn">pause</button>
        <button class="start_btn_game">start</button>
        <h2 class="timer">timer: 0秒</h2>
        <h2 class="steps">used steps: 100步</h2>
        <button class="mute_btn">mute</button>
        <button class="game_menu">menu</button>
      </div>
      <img src="./images/keys.png" class="keys" alt="">
      <canvas class="canvas"></canvas>
    </div>
    <div class="userName">
      <h2>nickname: </h2>
      <input type="text" class="name">
      <button class="goGame">Go</button>
    </div>
    <div class="fail_cont">
      <h2>fail</h2>
      <button>play again</button>
    </div>
    <div class="win_cont">
      <h2 class="win_time">time:</h2>
      <h2 class="win_steps">steps:</h2>
      <button class="win_cont_again">play again</button>
      <button class="win_ranking">ranking</button>
    </div>
    <div class="ranking">
      <div class="ranking_cont">
        <div class="ranking_btn">
          <button class="rank_easy">easy</button>
          <button class="rank_normal">normal</button>
          <button class="rank_hard">hard</button>
        </div>
        <ul>
          <li>Ranking</li>
          <li>Nickname</li>
          <li>Consumed time</li>
          <li>Steps</li>
        </ul>
        <ul class="box">
        </ul>
      </div>
    </div>
  </div>
  <audio loop class="bjMusic" src="./music/6.mp3"></audio>
  <audio class="door" src="./music/door.mp3"></audio>
  <audio class="key" src="./music/key.mp3"></audio>
  <audio class="lose" src="./music/lose.mp3"></audio>
  <audio class="win" src="./music/win.mp3"></audio>
  <script type="module" src="js/script.js"></script>
</body>

</html>